<template>
  <router-view v-slot="{ Component, route }">
    <!-- <transition> -->
    <keep-alive>
      <component :is="Component" v-if="route.meta.keepAlive == true" :key="route.path" />
    </keep-alive>
    <component :is="Component" v-if="!route.meta.keepAlive" :key="route.path" />
    <!-- </transition> -->
  </router-view>
</template>

<script lang="ts" setup>
</script>

<style lang="less" scoped>
/* 渐变设置 */
.fade-enter-from,
.fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

.fade-enter-active {
  transition: all 0.1s ease;
}

.fade-leave-active {
  transition: all 0.1s cubic-bezier(1, 0.6, 0.6, 1);
}
</style>
